<template>
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6 resume-section relative">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">技能特长</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="space-y-6">
      <div>
        <h3 class="font-medium text-gray-700 mb-3">专业技能</h3>
        <div v-if="!editMode" class="flex flex-wrap gap-2">
          <div v-for="skill in professionalSkills" :key="skill" class="skill-tag px-3 py-1.5 bg-gradient-to-r from-blue-50 to-primary/5 text-primary rounded-full border border-primary/10 hover:shadow-sm transition-all duration-200">
            {{ skill }}
          </div>
        </div>
        <div v-else class="space-y-2">
          <div class="flex flex-wrap gap-2 mb-2">
            <div v-for="(skill, index) in professionalSkills" :key="index" class="skill-tag px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full flex items-center">
              {{ skill }}
              <button @click="removeSkill('professional', index)" class="ml-2 text-red-500 hover:text-red-700">
                <i class="ri-close-line"></i>
              </button>
            </div>
          </div>
          <div class="flex items-center">
            <input v-model="newProfessionalSkill" type="text" placeholder="添加专业技能" class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-primary" @keyup.enter="addSkill('professional')">
            <button @click="addSkill('professional')" class="px-4 py-2 bg-primary text-white rounded-r hover:bg-primary/90">添加</button>
          </div>
        </div>
      </div>
      
      <div>
        <h3 class="font-medium text-gray-700 mb-3">工具掌握</h3>
        <div v-if="!editMode" class="flex flex-wrap gap-2">
          <div v-for="tool in tools" :key="tool" class="skill-tag px-3 py-1.5 bg-green-50 text-green-700 rounded-full">
            {{ tool }}
          </div>
        </div>
        <div v-else class="space-y-2">
          <div class="flex flex-wrap gap-2 mb-2">
            <div v-for="(tool, index) in tools" :key="index" class="skill-tag px-3 py-1.5 bg-green-50 text-green-700 rounded-full flex items-center">
              {{ tool }}
              <button @click="removeSkill('tools', index)" class="ml-2 text-red-500 hover:text-red-700">
                <i class="ri-close-line"></i>
              </button>
            </div>
          </div>
          <div class="flex items-center">
            <input v-model="newTool" type="text" placeholder="添加工具" class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-primary" @keyup.enter="addSkill('tools')">
            <button @click="addSkill('tools')" class="px-4 py-2 bg-primary text-white rounded-r hover:bg-primary/90">添加</button>
          </div>
        </div>
      </div>
      
      <div>
        <h3 class="font-medium text-gray-700 mb-3">语言能力</h3>
        <div class="space-y-3">
          <div v-for="(language, index) in languages" :key="index">
            <div class="flex justify-between mb-1">
              <span v-if="!editMode" class="text-gray-600">{{ language.name }}</span>
              <input v-else v-model="language.name" type="text" class="text-gray-600 bg-transparent border-b border-gray-300 focus:border-primary outline-none">
              
              <span v-if="!editMode" class="text-gray-600">{{ language.level }}</span>
              <select v-else v-model="language.level" class="border rounded px-2 py-1 text-sm">
                <option>入门</option>
                <option>熟练</option>
                <option>精通</option>
              </select>
            </div>
            <div class="h-2 bg-gray-200 rounded-full">
              <div class="h-2 bg-primary rounded-full transition-all duration-300" :style="{ width: language.percentage + '%' }"></div>
            </div>
          </div>
        </div>
        <button v-if="editMode" @click="addLanguage" class="mt-2 text-primary hover:text-primary/80">
          <i class="ri-add-line mr-1"></i>添加语言
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const professionalSkills = ref(['产品规划', '用户研究', '数据分析', '品牌策略', '市场营销', '项目管理', '团队管理'])
const tools = ref(['Axure', 'Figma', 'Tableau', 'Google Analytics', 'Office套件', 'SQL基础'])
const languages = ref([
  { name: '英语', level: '熟练', percentage: 85 },
  { name: '日语', level: '中级', percentage: 60 }
])

const newProfessionalSkill = ref('')
const newTool = ref('')

const addSkill = (type: 'professional' | 'tools') => {
  if (type === 'professional' && newProfessionalSkill.value.trim()) {
    professionalSkills.value.push(newProfessionalSkill.value.trim())
    newProfessionalSkill.value = ''
  } else if (type === 'tools' && newTool.value.trim()) {
    tools.value.push(newTool.value.trim())
    newTool.value = ''
  }
}

const removeSkill = (type: 'professional' | 'tools', index: number) => {
  if (type === 'professional') {
    professionalSkills.value.splice(index, 1)
  } else {
    tools.value.splice(index, 1)
  }
}

const addLanguage = () => {
  languages.value.push({ name: '', level: '入门', percentage: 30 })
}
</script>
